<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="raw.js"></script>

<style type="text/css" media="screen">
  body {
  background-color: #f9f9f9;
    margin:0; padding:0;
    font-family:sans-serif;
    font-size:14px;
}

* {

    -webkit-user-select: none;
    cursor:default;
}
.toolbar {
    background-color:#673AB7;
    height:56px;
    overflow:hidden;
}


#dialog {
  width:250px;
  height:120px;
  opacity:0.0;
  pointer-events:none;
  -webkit-transform: scale(0.95) translate3d(0,100px,0);;
  -webkit-transition: -webkit-transform 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out, -webkit-box-shadow .5s ease-out;

    -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
      -webkit-transition-delay:0.25s;

}

#dialog.visible {
  pointer-events:all;
  opacity:1.0;
  -webkit-transform: scale(1.0) translate3d(0,0,0);;
  width:250px;
  height:160px;
      -webkit-box-shadow:0 19px 19px rgba(0,0,0,0.30), 0 15px 6px rgba(0,0,0,0.22);
  -webkit-transition-delay:0.0s;

}


.dialog {
    top:120px;
    right: 0;
    left: 50%;
    margin-left:-125px;
    padding:24px 16px 20px 24px;
    position:absolute;

    background:white;
    color:rgba(0,0,0,0.5);
    margin-bottom:38px;
    overflow:hidden;
}
.dialog h1 {
    font-size:20px;
    font-weight:normal;
    padding:0; margin-top:0;
}

.dialog .button {
    position:absolute;
    top:160px;
    right:10px;
}

/*#menu {
  width:250px;
  height:120px;
  opacity:0.0;
  pointer-events:none;
  -webkit-transform: scale(0.95) translate3d(0,100px,0);;
  -webkit-transition: -webkit-transform 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out, -webkit-box-shadow .5s ease-out;

    -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
}

#menu.visible {
  pointer-events:all;
  opacity:1.0;
  -webkit-transform: scale(1.0) translate3d(0,0,0);;
  width:250px;
  height:160px;
      -webkit-box-shadow:0 19px 19px rgba(0,0,0,0.30), 0 15px 6px rgba(0,0,0,0.22);
}*/




.menu {
    width:160px;
    height:160px;
    background:white;
    position:absolute;
    right:8px;
    top: 8px;
    padding:0;


  opacity:0.0;
  pointer-events:none;
  -webkit-transform: scale(0.95) translate3d(0,0,0);;
  -webkit-transition: -webkit-transform 0.3s ease-out, width 0.2s ease-out, height 0.3s ease-out, opacity 0.1s ease-out, -webkit-box-shadow .5s ease-out;

    -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
  -webkit-transition-delay:0.35s;
  overflow:hidden;


}

.menu.visible {
  width:180px;
  height:192px;
  pointer-events:all;
  opacity:1.0;
  -webkit-transform: scale(1.0) translate3d(0,0,0);;
  -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
    -webkit-transition-delay:0.15s;

}



.menu div {
    height:48px;
    padding:0;

}

.menu canvas {
    height:48px;
    width: 100%;
}


.button_floating {
    width:56px;
    height:56px;
    color:#fff;
    background-color:#039BE5;
    border-radius:28px;
    position:absolute;
    top:388px;
    right:40px;
}

.container {
}




.button {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.button_menu.container {
    margin: 0px;
    height: 48px;
    padding: 0;
}



.button_menu {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
    text-align:left !important;
    color:rgb(100,100,100);
}

.button_toolbar {
    -webkit-border-radius: 84px;

    color: rgb(255,255,255);
    width: 80px;
    height: 80px;
    float:left;
    margin-right:-24px;
    margin-top:-12px;
    background-color: rgba(0, 0, 0, 0);
}

#button_small {
   color: rgb(100, 100, 100);
    background-color: #ffffff;
    width: 80px;
    height: 32px;

}

#button_blue {
   color: rgb(255, 255, 255);
    background-color: #0277BD;
    width: 80px;
    height: 32px;
}

#button_borderless_square {
  color: #ffffff;
  background-color: #f9f9f9;
  border: 1px solid #f0f0f0;
  width: 100px;
  height: 100px;
  background-color: rgb(255, 255, 255, 0);
  background-image:url(http://wallpaperandbackground.com/wp-content/uploads/2014/03/Field-Landscape.jpg);
    background-size:cover;

}

#button_borderless {
  color: #777777;
  background-color: #ffffff;
  width:80px;
  height: 32px;
    margin-right:72px;
    content: "CANCEL";
}

#button_borderless_blue {
  color: #4285F4;
  background-color: #ffffff;
  width: 64px;
  height: 32px;
  content:"OK";
}

#button_large {
  color: rgb(255, 255, 255);
  width: 100%;
  height: 360px;
  background-color:#81D4FA;
}

#button_toolbar1 {
    content: '';
    color:transparent;
        margin-left:-4px;

}

#button_toolbar2 {
  content: '★';
  float:right;
}

#button_toolbar3 {
    content: 'MENU';
    font-size: 14px;
    width: 88px;
    height:88px;
    margin-top: -16px;
    color:#7FFFFF;
    float:right;
    margin-right:0;

}

.caption {
  z-index: 100;
  background-color: red;
}

#button_toolbar0.animate {
    -webkit-animation: play 0.5s steps(16);

}


.button.raised {
  -webkit-transition: -webkit-box-shadow 0.2s;
  -webkit-transition-delay: 0.2s;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
}

.button.raised.activated {
  -webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.19), 0px 6px 3px rgba(0,0,0,0.23);
  -webkit-transition-delay: 0.0s;
}


.floating {
  -webkit-transition: -webkit-box-shadow 0.2s;
  -webkit-transition-delay: 0.2s;
  -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
}

.floating.activated {
  -webkit-box-shadow: 0px 14px 14px rgba(0,0,0,0.25), 0px 10px 5px rgba(0,0,0,0.22);
  -webkit-transition-delay: 0.0s;
}

#title {
  color:white;
  font-size:20px;
  line-height:58px;
  margin-left:24px;
}

.content {
  padding-left:72px; padding-top:24px; padding-right:144px;
  line-height:20px;
  color:#666;
}

@-webkit-keyframes play {
   from { background-position: 0px 0px; }
     to { background-position: 0px -384px; }
}

#button_toolbar0 {
  pointer-events: none;
  position:absolute;
  top:16px;
  left: 24px;
  content: "\00a0";
    width:24px;
    height:24px;
  background-image: url();
}

#button_toolbar0.selected {
  background-image: url();
}
</style>
</head>

<body id="">
  <div class="toolbar">
    <div id="button_toolbar0" class="toolbar_icon"></div>
    <span class="container"><canvas class="paper button_toolbar recenteringTouch" id="button_toolbar1" onclick="animateIcon()"></canvas></span>
    <span id="title" style="float:left">Ripple test</span>
    <span class="container"><canvas onClick="toggleMenu()" class="paper button_toolbar recenteringTouch" id="button_toolbar3"></canvas></span>
    <span class="container"><canvas class="paper button_toolbar recenteringTouch" id="button_toolbar2"></canvas></span>
    <span class="container"><canvas class="paper button_toolbar recenteringTouch" id="button_toolbar2"></canvas></span>

</div>

<div id="dialog" class="dialog visible">
    <h1>Press mah buttons!</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 
    <span class="container"><canvas class="paper button" id="button_borderless" value="CANCEL"></canvas></span>
    <span class="container"><canvas class="paper button" id="button_borderless_blue" onclick="toggleDialog()" value="OK"></canvas></span>
</div>

<div id="menu" class="menu visible">
    <div class="container button_menu"><canvas class="paper button_menu" value="Fold" style="text-align:left"></canvas></div>
    <div class="container button_menu"><canvas class="paper button_menu" value="Spindle" style="text-align:left"></canvas></div>
    <div class="container button_menu"><canvas class="paper button_menu" onClick="" value="Mutilate" style="text-align:left"></canvas></div>
        <div class="container button_menu"><canvas class="paper button_menu" onClick="toggleMenu()" value="Dismiss" style="text-align:left"></canvas></div>

</div>
<div class="container"><canvas class="paper button recenteringTouch" id="button_large"></canvas></div>
<div class="content" style="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p></p>
<span class="container" style="margin-right:8px;"><canvas class="paper button raised" id="button_blue" value="ABORT"></canvas></span>
<span class="container" style="margin-right:8px;"><canvas class="paper button raised" id="button_small" value="RETRY"></canvas></span>
  <span class="container"><canvas class="paper button raised" id="button_small" value="FAIL"></canvas></span>

  <p><p>
<canvas class="paper button" id="button_borderless_square"></canvas>


</div>
<div class="container"><canvas onClick="toggleDialog()" class="paper button_floating floating recenteringTouch" id="button_floating" value="★"></canvas></div>
</body>
</html>
